<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Cubes</title>
    <meta name="description" content="Cubes - A-Frame">
    <script src="../../../dist/aframe-master.js"></script>
  </head>
  <body>
    <a-scene background="color: #ECECEC">
      <a-assets>
        <a-mixin id="box" geometry="depth: 0.1; height: 0.1; width: 0.1"></a-mixin>
        <a-mixin id="frame-edge" geometry="primitive: box; depth: 10; height: 0.1; width: 0.1"
                                 material="color: #404040"></a-mixin>
        <img id="shadow" src="../../assets/img/radial-shadow-2.png">
        <img id="texture" src="http://i.imgur.com/6qHKYGf.png" crossorigin>
      </a-assets>

      <a-entity position="0 0 -11" rotation="0 45 0">
        <a-box src="#texture" position="-5 0 -2" width="1" color="#F16745"></a-box>
        <a-box height="2" color="#FFC65D"></a-box>
        <a-box position="5 0 2" depth="5" color="#7BC8A4"></a-box>
        <a-box position="5 5 -5" width="1" height="2" depth="22" color="#4CC3D9"></a-box>
        <a-box position="1 2 1" width="1" height="1" depth="1" color="#93648D"></a-box>
        <a-box position="-3 0 0" width="0.5" height="10" depth="0.5" color="#404040"></a-box>

        <a-entity position="-2 5 4" scale="0.15 0.15 0.15">
          <a-entity mixin="frame-edge" position="5 5 0" ></a-entity>
          <a-entity mixin="frame-edge" position="5 -5 0" ></a-entity>
          <a-entity mixin="frame-edge" position="-5 5 0" ></a-entity>
          <a-entity mixin="frame-edge" position="-5 -5 0" ></a-entity>
          <a-entity mixin="frame-edge" position="0 5 5" rotation="0 90 0"></a-entity>
          <a-entity mixin="frame-edge" position="0 5 -5" rotation="0 90 0"></a-entity>
          <a-entity mixin="frame-edge" position="0 -5 5" rotation="0 90 0"></a-entity>
          <a-entity mixin="frame-edge" position="0 -5 -5" rotation="0 90 0"></a-entity>
          <a-entity mixin="frame-edge" position="5 0 5" rotation="90 0 0"></a-entity>
          <a-entity mixin="frame-edge" position="5 0 -5" rotation="90 0 0"></a-entity>
          <a-entity mixin="frame-edge" position="-5 0 5" rotation="90 0 0"></a-entity>
          <a-entity mixin="frame-edge" position="-5 0 -5" rotation="90 0 0"></a-entity>
        </a-entity>

        <a-entity id="bits" position="-6 -1 0">
          <a-box mixin="box" position="0 -0.2 0" color="#4CC3D9"></a-box>
          <a-box mixin="box" position="0.5 -0.2 0.5" color="#93648D"></a-box>
          <a-box mixin="box" position="0 0 2" color="#7BC8A4"></a-box>
          <a-box mixin="box" position="-0.5 -0,5 3" color="#FFC65D"></a-box>
          <a-box mixin="box" position="0 0 4" color="#F16745"></a-box>
          <a-box mixin="box" position="-0.2 -0.4 5" color="#FFC65D"></a-box>
          <a-box mixin="box" position="0 0 6" color="#4CC3D9"></a-box>
          <a-box mixin="box" position="0.2 0 7" color="#93648D"></a-box>
        </a-entity>
      </a-entity>

      <!-- Cube shadow -->
      <a-image id="shadow" position="0 -14 0" src="#shadow" opacity="1" rotation="-90 0 0"
               scale="14 14 14"></a-image>
    </a-scene>
  </body>
</html>
